<template>
    <component v-if="customChart" v-bind:is="customChart" ref="myChartVm" :config="config">
    </component>
</template>

<script>
//自定义图表
import ChartPublic from '../ChartPublic.js'
import { Util } from "@lowcode/jpaas-base-lib"
import BusEvent from "../../BusEvent";
import FormCustomPublic from "../../FormCustomPublic.js";

export default {
    name: "customChartComponent",
    mixins: [BusEvent, FormCustomPublic],
    props: {
        config: {
            type: Object
        }
    },
    data() {
        return {
            customChart: "",
            script: "",
            template: "<div class=\"wrap\">\n" +
                "        <div><filter-params @paramsChange=\"paramsChange\" :config=\"config\" :filterParams=\"config.filterParams\" ></filter-params></div>\n" +
                "        <div style=\"height: 100%\" :ref=\"config.alias\"></div>\n" +
                "    </div>"
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            let jsScript = this.config.jsScript;
            if (jsScript) {
                jsScript = Util.replaceDefault(jsScript);
                let func = new Function("return " + jsScript);
                this.script = func();
                let key = 'customChart_' + this.config.alias;
                window.app.component(key, {
                    mixins: [ChartPublic],
                    template: this.template,
                    ...this.script
                })
                this.customChart = key;
            } else {
                this.customChart = "";
            }
        },
        handPublicReceive(args) {
            //通过方法调用自定义图形增加接收方法.
            let chart = this.$refs.myChartVm;
            if (args.method) {
                if (!chart[args.method]) {
                    this.$message.warning("未找到方法：" + args.method);
                    return;
                }
                if (args.data) {
                    chart[args.method](args.data);
                }
                else {
                    chart[args.method]();
                }
                return;
            }
            else {
                //处理外部传的参数
                if (chart["handCustomParams"]) {
                    chart["handCustomParams"](args);
                }
            }
        }
    },
    watch: {
        config: {
            handler: function (val, oldVal) {
                let self = this;
                setTimeout(function () {
                    self.init();
                }, 1000)
            },
            deep: true
        },
        handPublicReceive(args) {
            //通过方法调用自定义图形增加接收方法.
            if (args.method && this.viewKey == args.component) {
                let chart = this.$refs.myChartVm;
                if (!chart[args.method]) {
                    this.$message.warning("未找到方法：" + args.method);
                    return;
                }
                if (args.data) {
                    chart[args.method](args.data);
                }
                else {
                    chart[args.method]();
                }
                return;
            }
        },
        watch: {
            config: {
                handler: function (val, oldVal) {
                    let self = this;
                    setTimeout(function () {
                        self.init();
                    }, 1000)
                },
                deep: true
            },
        }
    }
}
</script>

<style scoped></style>
